import React from 'react';
import { StepConfig } from '../types';

interface ConfigTabsProps {
  configs: StepConfig[];
  currentConfigId: string;
  editingTabId: string | null;
  editingTabName: string;
  onSwitchConfig: (configId: string) => void;
  onStartEditingTab: (configId: string, currentName: string) => void;
  onFinishEditingTab: () => void;
  onCancelEditingTab: () => void;
  onDeleteConfig: (configId: string) => void;
  onCreateNewConfig: (name: string) => void;
  setEditingTabName: (name: string) => void;
}

const ConfigTabs: React.FC<ConfigTabsProps> = ({
  configs,
  currentConfigId,
  editingTabId,
  editingTabName,
  onSwitchConfig,
  onStartEditingTab,
  onFinishEditingTab,
  onCancelEditingTab,
  onDeleteConfig,
  onCreateNewConfig,
  setEditingTabName,
}) => {
  return (
    <div className="tabs-container">
      <div className="tabs-nav">
        {configs.map((config) => (
          <div
            key={config.id}
            className={`tab ${
              currentConfigId === config.id ? "active" : ""
            }`}
            onClick={() => onSwitchConfig(config.id)}
            onDoubleClick={() => onStartEditingTab(config.id, config.name)}
          >
            {editingTabId === config.id ? (
              <input
                type="text"
                value={editingTabName}
                onChange={(e) => setEditingTabName(e.target.value)}
                onBlur={onFinishEditingTab}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    onFinishEditingTab();
                  } else if (e.key === "Escape") {
                    onCancelEditingTab();
                  }
                }}
                onClick={(e) => e.stopPropagation()}
                className="tab-name-input"
                autoFocus
              />
            ) : (
              <span className="tab-name">{config.name}</span>
            )}
            {config.id !== "default" && configs.length > 1 && (
              <button
                className="tab-close"
                onClick={(e) => {
                  e.stopPropagation();
                  if (confirm(`确定要删除配置 "${config.name}" 吗？`)) {
                    onDeleteConfig(config.id);
                  }
                }}
                title="关闭标签"
              >
                ×
              </button>
            )}
          </div>
        ))}

        {/* 新建标签按钮 */}
        <div
          className="tab tab-new"
          onClick={() => {
            const newName = prompt("请输入新配置名称:");
            if (newName) {
              onCreateNewConfig(newName);
            }
          }}
        >
          <span>+</span>
        </div>
      </div>
    </div>
  );
};

export default ConfigTabs;